<template>
  <div class="person">
    <ul>
      <li v-for="g in list" :key="g.id">{{ g.name }}</li>
    </ul>
  </div>
</template>

<script lang="ts" setup name="Person">
  import {type PersonInter,type Persons} from '@/types';

  //defineProps和withDefault属于宏函数，可以不引入
  import { defineProps , withDefaults} from 'vue'
  
  //defineProps(['a'])  必须用数组包裹起来，才能接收a

  //let x = defineProps(['a','list'])  接受a的同时将props保存，此时才可以使用a
  
  //defineProps(['list'])  只接收list

  //接收list+限制类型+限制必要性（加上?）+指定默认值（当list不存在时的默认值）
  withDefaults(
    defineProps<{
    list?:Persons
  }>(),{list:()=>[{id:'1',name:'康师傅',age:18}]}
              )


</script>
//scoped:局部样式：只在模板中的样式，只对当前组件有效
<style scoped>
  .person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
  }
  button {
    margin: 0 5px;
  }
  li {
    font-size: 20px;
  }
</style>